<template>
  <div>
    <el-form
      ref="addForm"
      :model="supplier"
      :rules="rules"
      label-width="auto"
      style="
        max-width: 1000px;
        margin: auto;
        background-color: #fff;
        padding: 10px;
      "
    >
      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        基础信息
      </div>
      <el-row style="margin-top: 30px">
        <el-col :span="12">
          <el-form-item label="登录账号：" prop="account">
            <el-input v-model="supplier.account" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码：" prop="password">
            <el-input v-model="supplier.password" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="供应商公司名称：" prop="name">
            <el-input v-model="supplier.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地区：">
            <el-select v-model="supplier.area" placeholder="请选择">
              <el-option
                v-for="item in areaOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="地址：">
            <el-input v-model="supplier.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司简介">
            <el-input v-model="supplier.introduction" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="主营产品分类">
            <el-select v-model="supplier.productType">
              <el-option
                v-for="item in productTypeOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报价系数">
            <el-input v-model="supplier.quotation" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="可以产生的材质种类">
            <el-checkbox-group v-model="materials">
              <el-checkbox
                v-for="item in materialsOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="营业执照">
            <el-upload
              :action="host + '/upload'"
              list-type="picture-card"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="logo">
            <el-upload
              :action="host + '/upload'"
              list-type="picture-card"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1"
            >
              <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        联系人信息
      </div>
      <el-row style="margin-top: 30px">
        <el-col :span="12">
          <el-form-item label="销售联系人" prop="contact.sales_name">
            <el-input
              v-model="supplier.contact.sales_name"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售联系电话">
            <el-input
              v-model="supplier.contact.sales_phone"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="销售邮箱">
            <el-input
              v-model="supplier.contact.sales_email"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板联系人">
            <el-input
              v-model="supplier.contact.boss_name"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="老板联系电话">
            <el-input
              v-model="supplier.contact.boss_phone"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="财务联系人">
            <el-input
              v-model="supplier.contact.finance_name"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="财务联系电话">
            <el-input
              v-model="supplier.contact.finance_phone"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="财务邮箱">
            <el-input
              v-model="supplier.contact.finance_email"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!--      首付款信息-->
      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        首付款信息
      </div>
      <el-row style="margin-top: 30px">
        <el-col :span="12">
          <el-form-item label="开户银行">
            <el-input
              v-model="supplier.supplierPayformation.bandName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款账号">
            <el-input
              v-model="supplier.supplierPayformation.account"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!--      开票信息-->
      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        开票信息
      </div>
      <el-row style="margin-top: 30px">
        <el-col :span="12">
          <el-form-item label="公司名称">
            <el-input
              v-model="supplier.supplierPayformation.company"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纳税识别号">
            <el-input
              v-model="supplier.supplierPayformation.tin"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              v-model="supplier.supplierPayformation.note"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!--      运费条款-->

      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        运费条款
      </div>
      <!--      <el-row style="margin-top: 30px">-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="是否含运费">-->
      <!--            <el-radio-group>-->
      <!--              <el-radio value="1">是</el-radio>-->
      <!--              <el-radio value="2">否</el-radio>-->
      <!--            </el-radio-group>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="是否含进仓费">-->
      <!--            <el-radio-group>-->
      <!--              <el-radio value="1">是</el-radio>-->
      <!--              <el-radio value="2">否</el-radio>-->
      <!--            </el-radio-group>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="产品参数支持">-->
      <!--            <el-radio-group>-->
      <!--              <el-radio value="1">需要审核</el-radio>-->
      <!--              <el-radio value="2">无需审核</el-radio>-->
      <!--            </el-radio-group>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

      <div style="text-align: center; margin: 20px">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { saveSupplier } from "@/api/supplier.js";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { getCategory } from "@/api/category.js";
import { queryDictChild } from "@/api/dict.js";
import host from "@/utils/env.js";

//路由实例
const router = useRouter();

const supplier = ref({
  account: "",
  password: "",
  name: "",
  area: "",
  address: "",
  introduction: "",
  productType: "",
  quotation: "",
  materialsType: 0,
  logo: "",
  license: "",
  contact: {
    supplierId: "",
    sales_name: "",
    sales_phone: "",
    sales_email: "",
    boss_name: "",
    boss_phone: "",
    boss_email: "",
    finance_name: "",
    finance_phone: "",
    finance_email: ""
  },
  supplierPayformation: {
    bandName: "",
    account: "",
    company: "",
    tin: "",
    note: ""
  }
});

//验证规则
const rules = {
  name: [{ required: true, message: "请输入客户名称名称", trigger: "blur" }],
  account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  "contact.sales_name": [
    { required: true, message: "请输入销售联系人", trigger: "blur" }
  ]
};
//客户分类
const categoryOptions = ref([]);
//营业执照
const imageUrl = ref("");
//logo
const imageUrl1 = ref("");

//主营产品分类
const productTypeOptions = ref([
  {
    code: 1001,
    name: "产品询价"
  },
  {
    code: 1002,
    name: "筛网"
  },
  {
    code: 1001,
    name: "托辊"
  }
]);
//内销外销选项
const materialsOptions = ref([]);
//地区
const areaOptions = ref([
  {
    label: "国内",
    value: 1
  },
  {
    label: "国外",
    value: 2
  }
]);
//营业执照文件上传
const handleAvatarSuccess = (response, uploadFile) => {
  //上传成功
  if (response.code == 200) {
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
    supplier.value.license = response.data;
  }
};

const beforeAvatarUpload = rawFile => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("请选择正确格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("Avatar picture size can not exceed 10MB!");
    return false;
  }
  return true;
};
//logo文件上传
const handleAvatarSuccess1 = (response, uploadFile) => {
  //上传成功
  if (response.code == 200) {
    imageUrl1.value = URL.createObjectURL(uploadFile.raw);
    supplier.value.logo = response.data;
  }
};

const beforeAvatarUpload1 = rawFile => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("请选择正确格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("大小小于10MB!");
    return false;
  }
  return true;
};

//声明同名引用
const addForm = ref();
//成交或询价产品
const materials = ref([]);

//查询字典里的材质管理中的材质
async function queryMaterial() {
  let res = await queryDictChild(4);
  if (res.code == 200) {
    materialsOptions.value = res.data;
  }
}

// 保存用户
async function save() {
  supplier.value.materialsType = materials.value.join(",");
  let valid = await addForm.value.validate(() => {});
  if (!valid) {
    ElMessage({
      message: "表单验证未通过，请检查输入信息",
      type: "error"
    });
    return; // 验证未通过直接返回
  }

  let res = await saveSupplier(supplier.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  } else {
    ElMessage({
      message: "保存失败，请稍后重试",
      type: "error"
    });
  }
}

//取消
function close() {
  router.push("/supplier/list");
}

//生命周期
onBeforeMount(() => {
  queryMaterial();
});
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
